<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <link rel="stylesheet" href="../styles/page-home.css">
        <link rel="stylesheet" href="../styles/show.css">
</head>
<body>
    <!-- 页面顶部 -->
    <div id="nav-bottom">
        <!-- 顶部 -->
        <div class="nav-top">
                <div class="top">
                        <div class="py-container">
                                <div class="shortcut">
                                        <ul class="fl">
                                                <li class="f-item">商城欢迎您！</li>
                                                <li class="f-item">
                                                        "请"<a href="#">登录</a><span><a href="#">免费注册</a></span>
                                                </li>
                                        </ul>
                                        <ul class="fr">
                                                <li class="f-item">
                                                        <a href="#">我的订单</a>
                                                </li>
                                                <li class="f-item space"></li>
                                                <li class="f-item">
                                                        <a href="#">我的品优购</a>
                                                        <span class="arr"></span>
                                                </li>
                                                <li class="f-item space"></li>
                                                <li class="f-item">品优购会员</li>
                                                <li class="f-item space"></li>
                                                <li class="f-item">企业采购</li>
                                                <li class="f-item space"></li>
                                                <li class="f-item">关注品优购</li>
                                                <li class="f-item space"></li>
                                                <li class="f-item">客户服务</li>
                                                <li class="f-item space"></li>
                                                <li class="f-item">网站导航</li>

                                        </ul>
                                </div>
                        </div>

                </div>
                <!-- 头部 -->
                <div class="header">
                        <div class="py-container">
                                <div class="yui3-g Logo">
                                        <div class="yui3-u Left logoArea">
                                                <a href="#" class="logo-bd"></a>
                                        </div>
                                        <!-- 搜索、热词 -->
                                        <div class="yui3-u Center searchArea">
                                                <div class="search">
                                                        <form action class="sui-form form-inline">
                                                                <div class="input-append">
                                                                        <input type="text" id="autocomplete"
                                                                                class="input-error input-xxlarge" />
                                                                        <button type="button"
                                                                                class="sui-btn btn-xlarge btn-danger">搜索</button>
                                                                </div>
                                                        </form>
                                                </div>
                                                <div class="hotwords">
                                                        <ul>
                                                                <li class="f-item">品优购首发</li>
                                                                <li class="f-item">亿元优惠</li>
                                                                <li class="f-item">9.9元团购</li>
                                                                <li class="f-item">每99减30</li>
                                                                <li class="f-item">亿元优惠</li>
                                                                <li class="f-item">9元团购</li>
                                                                <li class="f-item">办公用品</li>
                                                        </ul>
                                                </div>
                                        </div>
                                        <!-- 购物车 -->
                                        <div class="yui3-u Right shopArea">
                                                <div class="fr shopcar">
                                                        <div class="show-shopcar">
                                                                <span class="car"></span>
                                                                <a href="#"
                                                                        class="sui-btn btn-default btn-xlarge">
                                                                        <span>我的购物车</span>
                                                                        <i class="shopnum">0</i>
                                                                </a>
                                                                <div class="clearfix shopcarlist"></div>
                                                        </div>

                                                </div>



                                        </div>
                                </div>
                                <!-- 导航条 -->
                                <div class="yui3-g NavList">
                                        <div class="all-sorts-list">
                                                <div class="yui3-u  Left  all-sort">
                                                        <h4>全部商品分类</h4>
                                                </div>
                                        <div class="yui3-u Center navArea">
                                                <ul class="nav">
                                                        <li class="f-item">服装城</li>
                                                        <li class="f-item">美妆馆</li>
                                                        <li class="f-item">传智超市</li>
                                                        <li class="f-item">全球购</li>
                                                        <li class="f-item">闪购</li>
                                                        <li class="f-item">团购</li>
                                                        <li class="f-item">拍卖</li>
                                                        <li class="f-item">有趣</li>
                                                </ul>
                                        </div>
                                        <div class="yui3-u Right"></div>
                                </div>
                                <!-- 商品详细信息 -->
                                <div class="classify">
                                    <!-- 左边属于什么类型 -->
                                    <div class="zuo">
                                        <ul class="zuoul">
                                            <li class="rl blue">手机、数码、通讯&nbsp;&nbsp;/</li>
                                            <li class="rl blue">手机&nbsp;&nbsp;/</li>
                                            <li class="rl blue">apple苹果&nbsp;&nbsp;/</li>
                                            <li class="rl">iPhone6s系列</li>
                                        </ul>
                                    </div>
                                    <!-- 商品图片 -->
                                    <div class="sptu">
                                        <div class="img">
                                            <div>
                                                <img src="../uploads/b1.png" alt="" class="mobile">
                                            </div>
                                            <div class="ximg">
                                                <span class="fl">‹</span>
                                                <ul class="rl">
                                                    <li  class="fl"><img src="../uploads/b2.png" alt=""></li>
                                                    <li  class="fl"><img src="../uploads/b3.png" alt=""></li>
                                                    <li  class="fl"><img src="../uploads/s1.png" alt=""></li>
                                                    <li  class="fl"><img src="../uploads/s2.png" alt=""></li>
                                                    <li  class="fl"><img src="../uploads/s3.png" alt=""></li>
                                                </ul>
                                                <span  class="fl">›</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="commodityyou">
                                        <div class="commodityyou1">
                                            <h4>Apple IPhone 6s (A1700) 64G玫瑰金色 移动通信电信4G手机</h4>
                                        </div>
                                        <div class="commodityyou2">
                                            <div class="shangshou">
                                                <span class="jiage">价格</span>
                                                <span class="qian red">￥</span>
                                                <a href="" class="jianjia red"><span class="jine red">5299.00</span>降价通知</a>
                                                <span>累计评价612188</span>
                                            </div>
                                            <div class="shangzhong">
                                                <span style="margin-right: 10px;">促销</span>
                                                <span class="jiajia">加价购</span>
                                                <a href="" class="gray">满999.00另加20.00元，或满1999.00另加30.00元,或满2999.00另加40.00元.<br><br>即可在购物车换购热销商品</a><a href="">详情››</a>
                                            </div>
                                        </div>
                                        <div class="commodityyou3 float">
                                            <span style="font-weight:bold; margin-right: 10px;">支持</span>
                                            <span class="gray">以旧换新,闲置手机回收,4G套餐超值抢 礼品购</span>
                                        </div>
                                        <div class="commodityyou4 float">
                                            <span style="font-weight:bold; margin-right: 10px;">配送至</span>
                                            <span class="gray">北京海淀区中关,有货支持,99元免运费 |活到付款 |211限时达<br><br>有自营发货,并提供售货服务,11.00前完成下单,预计今天 (08月10日) 送达</span>
                                        </div>
                                        <div class="commodityyou5 float">
                                            <ul>
                                                <li class="fl lii"><span style="font-weight:bold; margin-right: 10px;">选择颜色</span></li>
                                                <li class="fl li"><a href="">金色</a></li>
                                                <li class="fl li"><a href="">银色</a></li>
                                                <li class="fl li"><a href="">黑色</a></li>
                                                <li class="fl li"><a href="">玫瑰金</a></li>
                                            </ul>
                                        </div>
                                        <div class="commodityyou6 float">
                                            <ul>
                                                <li class="fl lii"><span style="font-weight:bold; margin-right: 10px;">选择版本</span></li>
                                                
                                                <li class="fl li"><a href="">公开版</a></li>
                                                <li class="fl li"><a href="">移动4G</a></li>
                                            </ul>
                                        </div>
                                        <div class="commodityyou7 float">
                                            <ul>
                                                <li class="fl lii"><span style="font-weight:bold; margin-right: 10px;">内存容量</span></li>
                                                <li class="fl li"><a href="">16G</a></li>
                                                <li class="fl li"><a href="">64G</a></li>
                                                <li class="fl li"><a href="">128G</a></li>
                                            </ul>
                                        </div>
                                        <div class="commodityyou8 float">
                                            <ul>
                                                <li class="fl lii"><span style="font-weight:bold; margin-right: 10px;">购买方式</span></li>
                                                <li class="fl li"><a href="">官方标配</a></li>
                                                <li class="fl li"><a href="">移动优惠购</a></li>
                                                <li class="fl li"><a href="">电信优惠购</a></li>
                                            </ul>
                                        </div>
                                        <div class="commodityyou9 float">
                                            <ul>
                                                <li class="fl lii"><span style="font-weight:bold; margin-right: 10px;">套&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装</span></li>
                                                <li class="fl li"><a href="">保护套装</a></li>
                                                <li class="fl li"><a href="">充电套装</a></li>
                                            </ul>
                                        </div>
                                        <div class="commodityyou10 float">
                                            <div class="commodityyou10s">
                                                <div class="g fl"><a href="">1</a></div>
                                                <div class="commodityyou10x fl">
                                                    <button class="">+</button>
                                                    <button class="">-</button>
                                                </div>
                                                <div class="fl jiaru">
                                                    <a href="">加入购物车</a>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                                <!-- 商品的基本参数 -->
                                <div class="canshu">
                                    <div class="canshuzuo fl">
                                        <div class="canshuzuoshang">
                                            <ul>
                                                <li class="fl fenlei">
                                                    <h4 style="width:150.3px">相关分类</h4>
                                                </li>
                                                <li class="fl">
                                                    <h4 style="width:150.3px">推荐品牌</h4>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="shoujipeijian fl">
                                            <ul class="floatt">
                                                <li class="fl"><span>手机</span></li>
                                                <li class="fl"><span>手机壳</span></li>
                                                <li class="fl"><span>内存卡</span></li>
                                                <li class="fl"><span>Iphone配件</span></li>
                                                <li class="fl"><span>贴膜</span></li>
                                                <li class="fl"><span>手机耳机</span></li>
                                                <li class="fl"><span>移动电源</span></li>
                                                <li class="fl"><span>平板电脑</span></li>
                                            </ul>
                                            <div class="shoujitupian">
                                                <img src="../uploads/mobile.png" alt="">
                                            </div>
                                            <div class="shoujitupianwenzi">
                                                <span>Apple苹果iPhone 6s(A1699)<h6>￥6888</h6></span>
                                            </div>
                                            <div class="shopping">
                                                <a href="">加入购物车</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="canshuyou fl">
                                        <div class="toubu">
                                            <ul class="fl">
                                                <li class="fl">
                                                    <span>商品介绍</span>
                                                </li>
                                                <li class="fl">
                                                    <span>规格与包装</span>
                                                </li>
                                                <li class="fl">
                                                    <span>售后保障</span>
                                                </li>
                                                <li class="fl">
                                                    <span>商品评价</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="float xinxi">
                                            <ul>
                                                <li  style="margin-top:20px;"><span>分辨率 : 1920*1080(FHD)</span></li>
                                                <li><span>后置摄像头 : 300万像素</span></li>
                                                <li><span>前置摄像头 : 500万像素</span></li>
                                                <li><span>核数 : 其他</span></li>
                                                <li><span>频率 : 以官网信息为准</span></li>
                                                <li><span>品牌 : Apple</span></li>
                                                <li><span>商品名称 : AppLEiPhone 6s Plus</span></li>
                                                <li><span>商品编号 : 1861089</span></li>
                                                <li><span>商品毛重 : 0.51kg</span></li>
                                                <li><span>商品产地 : 中国大陆</span></li>
                                                <li><span>热点 : 指纹识别</span></li>
                                                <li><span>系统 : 苹果 (IOS)</span></li>
                                                <li><span>像素 : 1000-1600万</span></li>
                                                <li><span>机身内存 : 64GB</span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <img src="" alt=""><img src="" alt="">
</body>
</html>